<!--
 * @Descripttion: 招商管理-意向客户跟进管理-意向客户特许经营市场变更记录
 * @version: 
 * @Author: lehaixia
 * @Date: 2023-04-18 09:26:15
 * @LastEditors: lehaixia
 * @LastEditTime: 2023-05-25 10:01:51
-->
<template>
  <div class="content">
    <div class="c-header">
      <div class="left">
        <div>
          <span class="name">{{ detail.customerName }}</span>
          <span class="phone">{{ filterPhone(detail.customerPhone) }}</span>
        </div>
        <div class="address">特许经营市场：{{ detail.marketName }}</div>
      </div>
      <div class="right" @click.stop="onCallPhone(detail.customerPhone)">
        <img class="icon" src="@/assets/images/phone.png" />
      </div>
    </div>
    <div class="customer-list">
      <PotentialCustomerMarketList :id="id" />
    </div>
  </div>
</template>

<script lang="ts">
  import PotentialCustomerMarketList from './components/List.vue'
  import { useRoute } from 'vue-router'
  import { reactive, toRefs, defineComponent } from 'vue'
  import { filterPhone, onCallPhone } from '@/utils'

  interface anyObjectModle {
    id: any
    detail: any
  }

  export default defineComponent({
    name: 'PotentialCustomerMarketChange',
    components: { PotentialCustomerMarketList },
    setup() {
      const $route = useRoute()

      const datas = reactive<anyObjectModle>({
        id: $route.query.id || '',
        detail: $route.params || {}
      })

      return {
        ...toRefs(datas),
        filterPhone,
        onCallPhone
      }
    }
  })
</script>
<style lang="less" scoped>
  .content {
    .c-header {
      margin: 8px 0;
      padding: 16px 14px;
      display: flex;
      align-items: center;
      background-color: var(--bg-global-weaker);

      .left {
        flex: 1;
        margin-right: 8px;
        .name {
          font: var(--font-main-title-strengthen);
          color: var(--texticon-default-strong);
          margin-right: 6px;
        }
        .phone {
          font: var(-font-main-title-body);
          color: var(--texticon-default-stronger);
        }

        .address {
          margin-top: 8px;
          font: var(--font-main-body);
          color: var(--texticon-default-stronger);
        }
      }

      .right {
        width: 40px;
        height: 40px;
        background: var(--texticon-color-brand-normal);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 24px;
          height: 24px;
        }
      }
    }

    .list {
      padding: 20px 14px;
    }
  }
</style>
